<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>计算属性</title>
  </head>
  <body>
    <pre>
          计算属性就是在vue里面把数据处理一下且数据改变时视图层数据也会改变
          computed对象加方法成员
          一定要return
      </pre
    >
    <div class="box">
      <p>{{reverse}}</p>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
      var vm = new Vue({
        el: '.box',
        data: {
          msg: 'mmd',
          //   reverse: 'jjjj',
        },
        methods: {},
        computed: {
          reverse: function (e, ps) {
            let arr = this.msg.split('')
            return [].reverse.call(arr).join('')
          },
        },
      })
    </script>
  </body>
</html>
